<template>
	<view class="text-df padding-bottom-xl">
		<view class="padding-com text-df">
			<view class="text-lg text-bold" style="line-height: 50rpx;">{{detail.artName}}</view>
			<view class="margin-top-xs  flex-row-bt">
				<view class="theme-color">{{detail.author}}</view>
				<view class="text-low">{{detail.createTime}}</view>
			</view>
			<view class="margin-top-sm">
				<mp-html :content="detail.content" container-style="line-height: 200%;"></mp-html>
			</view>
		</view>

		<!-- 接口请求加载动画 -->
		<loading></loading>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app"
	import { getArticleInfo } from '../../api/zixun/zixun'

	// 文章id
	const id = ref(null)
	let detail = reactive({
		artName: "",
		author: "",
		createTime: "",
		content: ""
	})

	onLoad((option) => {
		console.log(JSON.stringify(option))
		id.value = JSON.parse(JSON.stringify(option.id))
		get_detail()
	})

	const get_detail = () => {
		//获取文章详情
		getArticleInfo(parseInt(id.value)).then((res : any) => {
			detail.artName = JSON.parse(JSON.stringify(res.data)).artName
			detail.author = JSON.parse(JSON.stringify(res.data)).author
			detail.createTime = JSON.parse(JSON.stringify(res.data)).createTime
			detail.content = JSON.parse(JSON.stringify(res.data)).content
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>